<!-- 账单样式 -->
<template>
  <div v-show="props.show">
    <div class="pdf" v-for="(item, index) in props.datalist" :key="index" :class="item.number">
      <p class="box-title">{{ item.title }}</p>
      <div class="flexBetween marginT10 marginB20">
        <div>
          <div class="fontWeight">接收方：</div>
          <div>{{ item.username }}</div>
        </div>
        <div>
          <div class="fontWeight">账单编号：</div>
          <div>{{ item.number }}</div>
        </div>
        <div>
          <div class="fontWeight">日期：</div>
          <div>开始 <span class="marginL5"></span> {{ item.date_start }}</div>
          <div>结束 <span class="marginL5"></span> {{ item.date_end }}</div>
        </div>
      </div>
      <el-table :data="item.list?item.list:[]" border style="font-size: 16px;">
        <el-table-column prop="index" label="编号" align="center" width="90" />
        <el-table-column prop="agent_id" label="商户" align="center" width="150" #default="scope">
          {{ selectToLabel(indexStore.agentArray, scope.row.agent_id) }}
        </el-table-column>
        <el-table-column prop="symbol" label="货币" align="center" width="200" #default="scope">
          {{ scope.row.name }}({{ scope.row.symbol }})-({{ scope.row.remark }})
        </el-table-column>
        <el-table-column prop="total_game_income" label="总输赢" align="center" width="250" #default="scope">
          <span :class="colorClass(scope.row.total_game_income)">{{ scope.row.total_game_income }}</span>
        </el-table-column>
        <el-table-column prop="usdt_exchange_rate" label="USDT汇率" align="center" width="120" />
        <el-table-column prop="total_bet_count" label="换算（USDT）" align="center" width="250" #default="scope">
          <span class="colorText">{{ scope.row.total_bet_count }}</span>
        </el-table-column>
        <el-table-column prop="calculation" :label="props.query.calculation ? '返佣比例' : '分成比例'" align="center"
          width="240" #default="scope">
          <span v-if="props.query.calculation">{{ scope.row.share_proportion?scope.row.share_proportion+'%':'-' }}</span>
          <div class="flexWrap" v-else>
            <span class="marginR5" v-for="(second, two) in scope.row.config_ggr">
              {{ selectToLabel(GameBrandNum, second.platform) }}:{{ second.radio }}%
            </span>
          </div>
        </el-table-column>
        <el-table-column prop="total_usdt" label="汇总（USDT）" align="right" width="250" #default="scope">
          <span class="colorText">{{ scope.row.game_income }}</span>
        </el-table-column>
      </el-table>
      <div class="flexRightDetween marginT10">
        <div class="summation flex fontWeight">
          合计：<div class="width200 texRight">{{ item.summation }}</div>
        </div>
      </div>
      <p class="marginT10 fontSize16">*结算USDT金额</p>
      <p class="marginT2 fontSize16">*汇率以下个月第一天为准</p>
      <div class="collection textCenter marginT20">
        <div class="address">收款地址</div>
        <div>{{ item.type }}</div>
        <div v-show="item.address">{{ item.address }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { GameBrandNum } from '@/config/eunm'
import { colorClass, selectToLabel } from '@/utils/index'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  query: {
    type: Object as any,
    default: () => {
      return {}
    }
  },
  datalist: {
    type: Object as any,
    default: () => {
      return [{title: '账单报表', // 标题
        username: '', //  接收方
        number: '', //  账单编号
        date_start: '', //  日期开始
        date_end: '', //  日期结束
        list: [{
          index: 0,
          agent_id: 0,
          symbol: '',
          total_game_income: 0,
          usdt_exchange_rate: 0,
          total_bet_count: 0,
          calculation: 0,
          total_usdt: 0,
        }] as any[], //  数据
        summation: 0, //  汇总
        type: 'TRC20', //  钱包类型
        address: '', //  地址
      }] as any
    }
  },
})
</script>

<style scoped lang="scss">
@font-face {
  font-family: 'YaHei';
  src: url('@/assets/font/msyhl.ttc');
  font-weight: normal;
  font-style: normal;
}

.fontWeight {
  font-weight: 600 !important;
}

.fontSize16 {
  font-size: 16px !important;
}

.pdf {
  font-size: 21px;
  padding: 20px 40px;
  font-family: 'YaHei', sans-serif;

  .box-title {
    font-size: 34px;
    color: #0e8a88;
  }

  .summation {
    width: 270px;

    .width200 {
      border-radius: 3px;
      padding: 5px;
      background-color: #EEEEEE;
    }
  }

  .collection {
    width: 360px;
    font-size: 16px;
    border: 1px solid #dddddd;

    div {
      margin: -1px;
      padding: 5px 0;
      border: 1px solid #dddddd;
    }

    .address {
      color: #000000;
      background-color: #EEEEEE;
    }
  }
}
</style>
<style lang="scss"></style>